<template>
       
  <div class='login_container'>
    <div class="login_box">
       <!-- 登录logo区域 -->
       <div class="avatar_box">
          <img src="../assets/logo.png" alt="">
        </div>

        <!-- 登录表单区域 -->
        <!-- ：model数据绑定 ：rules验证规则绑定 -->
        <el-form ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm" :rules="loginRules">
                <!-- 用户名 -->
                <!-- prop引入用户验证 -->
                <el-form-item prop="username">
                  <!-- 加入属性设置图标 -->
                <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                <el-input prefix-icon="iconfont icon-3702mima" type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
    </div>
       
  </div>
</template>

<script>


export default {
   data() {
     return {
       //绑定了用户密码数据
       loginForm:{
         username:'admin',
         password:'123456'
       },
       //表单验证规则
       loginRules:{
         //用户验证
         username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          //密码验证
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
       }
     }
   },
   methods: {
     //重置模块
     resetLoginForm(){
       this.$refs.loginFormRef.resetFields()
     },
     //登录验证模块
     login(){
        this.$refs.loginFormRef.validate(async valid=>{
          //console.log(valid)返回的是一个布尔值
          if(!valid) return;
          //如果登录成功发送登录请求post
         const {data:res}= await this.$http.post('login',this.loginForm)
    
        // console.log(res.meta.status)请求状态码
        if(res.meta.status != 200) return this.$message.error('登录失败');
        
        this.$message.success('登录成功')
          //将token信息存入sessionStorage中作为身份验证
          window.sessionStorage.setItem('token',res.data.token)
          //跳转到后台页面
          this.$router.push('/home')
        
        })
     }
   }
 
}
</script>

<style lang="less" scoped>
// 选择使用scoped属性防止样式冲入
.login_container{
 background: linear-gradient(to bottom, skyblue 0%,pink 100%);
  // background-color: skyblue;
  height:100%;

}
.login_box{
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  .avatar_box {
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
            }
        }
        .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .btns {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
